Funcionamiento de un Rollover sencillo

En su día añadimos un efecto rollover en imágenes, me han pedido si podía explicar un poco sobre el funcionamiento así que ahí va.

Aunque aparentemente estamos aplicando el efecto a una imagen en realidad lo que hacemos es aplicarlo a un enlace. Para conseguirlo necesitamos el evento onmouseOver.Una imagen no admite el evento onmouseOver entonces lo que hacemos es incorporar la imagen dentro del enlace.

Si fuera un enlace normal en a href añadiríamos la url de un enlace, como no se trata de crear ningún enlace sino de crear un efecto lo que hacemos es añadir "#" en lugar de la url del enlace, y en onClick añadimos "return false"

<a href= "#" onmouseOver="document.rollover.src='tu-2ª-imagen-';" onClick="return false;">

Nos falta lo principal, y es una ruta para que al clicar nos lleve a otra imagen cuyo resultado sería el efecto rollover.
Lo conseguimos asignando un nombre a la imagen.

<img name="rollover" src="tu-imagen" width="100" height="100" border="0">
</a>

El resultado de todo esto sería:

<a href= "#" onmouseOver="document.rollover.src='tu-2ª-imagen-';" onClick="return false;">
<img name="rollover" src="tu-imagen" width="100" height="100" border="0">
</a>



Hasta ahí todo normal, el efecto rollover hace que al pasar el cursor sobre la imagen cambie, pero no vuelve a su estado original. Eso quiere decir que le falta el evento "onmouseOut"
El evento "onmouseOver" se ejecuta cuando pasamos la flecha del mouse sobre un enlace y el evento "onmouseOut "cuando la flecha lo abandona.

<a href= "#" onmouseOver="document.rollover.src='tu-2ª-imagen';" onClick= "return false;" onmouseOut="document.rollover.src='tu-imagen';">
<img name="rollover" src="tu-imagen" width="100" height="100" border="0">
</a>





Os preguntaréis por qué en el enlace que he dejado al principio de esta entrada era necesario añadir un script, la respuesta es muy sencilla. Cuando se aplica el evento onmouseOver estamos llamando a la 2ªimagen. Al no estar cargada en la memoria caché del navegador necesita hacer una petición HTTP al servidor.

La forma de solucionar eso es precargar la imagen antes de que se ejecute el evento. De esta forma el navegador la tiene disponible en su caché y el cambio de imagen es instantáneo.
Lo solucionamos añadiendo justo antes de </head> lo siguiente:

<script language="JavaScript" type="text/javascript">
imagenOn = new Image(100,100);
imagenOn.src = "tu-2ª-imagen";
</script>

En new Image(100,100); pondremos el mismo tamaño de imagen que utilizamos para el efecto.
En tu-2ª-imagen añadiremos la url de la segunda imagen mostrada para el efecto del rollover.

Suerte en el trabajo Alejandro ;)